<template>
 <div class="header">
     <div class="header-left">
       <div class="iconfont back-icon">&#xe624;</div>
     </div>
     <div class="header-input">
        <span class="iconfont">&#xe632;</span>
          请输入城市/景点/主题
      </div>
     <div class="header-right">
       城市
       <i class="iconfont">&#xe64a;</i>
     </div>
 </div>
</template>

<script>
export default {
  name: "HomeHeader"
};
</script>
<style  scoped>
.header {
  display: flex;
  width: 100%;
  background-color: #00bcd4;
  line-height: 2.6875rem;
  color:#fff;
}
.header-input{
    flex:1;
    background-color:#fff;
    border-radius:.125rem;
    height: 2rem;
    line-height:2rem;
    color:#ccc;
    margin-top:.375rem;
    margin-left:.3125rem;
    padding-left:.2rem

}
.header .header-left {
  width: 2rem;
  float: left;
}
.header .header-right {
  width: 4rem;
  text-align: center;
  float:right;
}
.back-icon {
  text-align: center;
  font-size:1.25rem;
}
</style>

